<template>
    <div class="right3">
        <div class="small-title">
            <span>专题统计</span>
        </div>

<div id="chart-panel2" class="crop-pie2" ref="chartPanel2"></div>
</div>
</template>

<script >
import { onMounted, ref} from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

import { getPie3D ,getParametricEquation} from "@/store/sector.js";

export default {
name: '4d',
onMounted() {
  this.$nextTick(function() {
    this.init();
  });
},

data() {
  return {
    //饼图数据+颜色
    optionData: [
      {
        name: '1554.2亩',//黄色
        value: 29,
        itemStyle: {
          color: 'rgb(215,212,27)'
        }},
      {
        name: '1434.2亩',//蓝色
        value: 20,
        itemStyle: {
          color: 'rgb(8,66,239)',
        }
      }, {
        name: '663.25亩',//绿色
        value: 16,
        itemStyle: {
          color: 'rgb(65,151,6)'
        }},
      {
        name: '554.2亩',//橙色
        value: 14,
        itemStyle: {
          color: 'rgb(170,72,212)'
        }}
      ,
      {
        name: '226.35亩',//名称
        value: 12,//值
        itemStyle: {//颜色 紫色
          color: 'rgba(123, 167, 212,1)'
        }
      },
      {
        name: '153.25亩',//名称
        value: 9,//值
        itemStyle: {//颜色 紫色
          color: 'red'
        }
      },
    ],
  }
},

mounted() {
  this.draw3d();
  this.$nextTick(() => {
    let parent = document.getElementById("chart-panel2"); // 获取父元素
    let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
    console.log(canvas);
    canvas[1].style.transform = "rotateX(30deg)";
  });
},

methods: {
draw3d() {
    // 基于准备好的dom，初始化echarts实例
    let chartPanel2 = echarts.init(document.getElementById("chart-panel2"));
    for (let i = 0; i < this.optionData.length; i++) {
      delete this.optionData[i].itemStyle.opacity;
    }
    // 传入数据生成 option
    let series = getPie3D(this.optionData, 2);  
    let boxHeight = this.getHeight3D(series,30);//通过传参设定3d饼/环的高度
    let option = {
      tooltip: {
        formatter: (params) => {
          // console.log(params)
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            return `<div style="padding:0 10px">${params.seriesName}：${(
              option.series[params.seriesIndex].pieData.proportion * 100
            ).toFixed(2)}%</div>`;
          }
        },
      },
      legend: {
        // data: legendData,
        orient: 'vertical',

        itemGap: 18,
        right:40,
        textStyle: {
          color: "#fff",
          fontSize: 15,
        },
        show: true,
        icon:'circle'
      },

      xAxis3D: {
        min: -1,
        max: 1,
      },
      yAxis3D: {
        min: -1,
        max: 1,
      },
      zAxis3D: {
        min: -1,
        max: 1,
      },
      grid3D: {

        left: '-20%',
        show: false, //是否显示三维笛卡尔坐标系。
        boxHeight: boxHeight, //三维笛卡尔坐标系在三维场景中的高度
        top: "-12.5%",

        viewControl: {
          //用于鼠标的旋转，缩放等视角控制
          alpha: 50, //角度
          distance: 250, //调整视角到主体的距离，类似调整zoom 重要
          rotateSensitivity: 0, //设置为0无法旋转
          zoomSensitivity: 1, //设置为0无法缩放
          panSensitivity: 0, //设置为0无法平移
          autoRotate: true , //自动旋转
        },
      },
      series: series,
    };

    chartPanel2.setOption(option);
  },

  //获取3d丙图的最高扇区的高度
  getHeight3D(series, height) {
    series.sort((a, b) => {
      return (b.pieData.value - a.pieData.value);
    })
    return height * 25 / series[0].pieData.value;
  },
}
}
</script>
<style lang="scss" scoped>
.right3 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: calc(100% / 3 + 100% / 3 + 24px);
  float: left;
  .small-title {
      left: 5%;
      position: relative;
        span {
        color: rgb(157, 211, 236);
        position: relative;

        }
}
.crop-pie2 {
  margin-top: 10px;
  left: 0px;
width: 100%;
height: 100%;
}
}

</style>